<template>
  <div>这是详情页</div>
</template>

<script>
export default {
  props: ["id"],
  /*
    当从一个详情页跳转到另一个详情页的时候(猜你喜欢)
    因为他们用的是同一个页面(组件)
    vue为了考虑性能，直接复用，组件不会销毁和重新创建了

    需要去监听url的改变
  */
  created() {
    console.log(this.id);
    // this.$route表示的是当前页面的路由信息(url信息)
    // console.log(this.$route?.params?.id);

    // 可选链操作符
    // const obj = {
    //   a: 3,
    // };
    // console.log(obj.b?.c);
    // fn?.();
  },

  watch: {
    $route(to, from) {
      console.log(to.params.id);
      // 重新请求数据了
    },
  },
};
</script>
